 <template>
  <div class="app-container calendar-list-container">
    <div v-if="isPayPassword=='00'">
      <el-steps :active="noPassActive" finish-status="success">
        <el-step title="填写银行卡"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>
    <div v-else>
      <el-steps :active="active" finish-status="success">
        <el-step title="填写银行卡"></el-step>
        <el-step title="设置交易密码"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>
    <div v-if="isPayPassword=='00'">
      <!-- 填写银行卡 -->
      <div v-if="active=='0'">
        <el-form :model="bankForm" :rules="rules" ref="bankForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="银行名称" prop="bankName">
            <el-input v-model="bankForm.bankName"></el-input>
          </el-form-item>
          <el-form-item label="银行账户名" prop="bankAccountName">
            <el-input v-model="bankForm.bankAccountName"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="bankNo">
            <el-input v-model="bankForm.bankNo"></el-input>
          </el-form-item>
        </el-form>
        <el-button style="margin-top: 12px;" @click="next('bankForm')">下一步</el-button>
      </div>
      <!-- 完成页面 -->
      <div v-else-if="active=='1'">
        <i class="el-icon-success"></i>
        <span>操作成功</span>
        <el-button style="margin-top: 12px;" @click="handleBack">返回</el-button>
      </div>
    </div>
    <div v-else>
      <!-- 填写银行卡 -->
      <div v-if="noPassActive=='0'">
        <el-form :model="noPwdForm" :rules="rules1" ref="noPwdForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="银行名称" prop="name">
            <el-input v-model="noPwdForm.bankName"></el-input>
          </el-form-item>
          <el-form-item label="银行账户名" prop="name">
            <el-input v-model="noPwdForm.bankAccountName"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="name">
            <el-input v-model="noPwdForm.bankNo"></el-input>
          </el-form-item>
        </el-form>
        <el-button style="margin-top: 12px;" @click="noPassNext">下一步</el-button>
      </div>
      <!-- 设置交易密码 -->
      <div v-else-if="noPassActive=='1'">
        <el-form :model="noPwdForm" :rules="rules1" ref="noPwdForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="交易密码" prop="password">
            <el-input v-model="noPwdForm.password"></el-input>
          </el-form-item>
          <el-form-item label="确认交易密码" prop="password1">
            <el-input v-model="noPwdForm.password1"></el-input>
          </el-form-item>
        </el-form>
        <el-button style="margin-top: 12px;" @click="noPassLast">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="noPassSubmit('noPwdForm')">提交</el-button>
      </div>
      <!-- 完成页面 -->
      <div v-else-if="noPassActive=='2'">
        <i class="el-icon-success"></i>
        <span>操作成功</span>
        <el-button style="margin-top: 12px;" @click="handleBack">返回</el-button>
      </div>
    </div>
    
  </div>
</template>

<script>
import { getMerchantInfo } from '@/api/crm/customers/merchantBase'
import { addBank } from '@/api/crm/payForAnotherBank/index'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      noPassActive: 0,
      active: 0,
      isPayPassword: '01',
      bankForm: {
        platformId: '',
        merchantId: '',
        bankName: '',
        bankAccountName: '',
        bankNo: '',
        password: ''
      },
      noPwdForm: {
        platformId: '',
        merchantId: '',
        bankName: '',
        bankAccountName: '',
        bankNo: '',
        password: '',
        password1: ''
      },
      rules: {
        bankName: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        bankAccountName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        bankNo: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      rules1: {
        bankName: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        bankAccountName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        bankNo: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        password1: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.queryMerchantPassword()
  },

  computed: {
    ...mapGetters(['elements', 'platformId', 'merchantId'])
  },
  methods: {
    queryMerchantPassword() {
      var str = {}
      str.platformId = this.platformId
      str.merchantId = this.merchantId
      getMerchantInfo(str).then(response => {
        if (response.code === '0000') {
          if (response.data.payPasswordStatus) {
            this.isPayPassword = response.data.payPasswordStatus
          } else {
            this.isPayPassword = '01'
          }
        }
      })
    },
    last() {
      if (this.active-- > 1) this.active = 0
    },
    next(formName) {
      if (this.active++ > 1) this.active = 0
      // 绑卡
      this.bankForm.platformId = this.platformId
      this.bankForm.merchantId = this.merchantId
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          addBank(this.bankForm).then(response => {
            if (response.code === '0000') {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        } else {
          return false
        }
      })
    },
    submit() {
      if ((this.active)++ > 1) this.active = 0
    },
    noPassLast() {
      if (this.noPassActive-- > 2) this.noPassActive = 0
    },
    noPassNext() {
      if (this.noPassActive++ > 2) this.noPassActive = 0
    },
    noPassSubmit(formName) {
      // 绑卡
      if (this.noPwdForm.password !== this.noPwdForm.password1) {
        alert('两次密码不一致')
        return false
      }
      if ((this.noPassActive)++ > 2) this.noPassActive = 0
      this.bankForm.platformId = this.platformId
      this.bankForm.merchantId = this.merchantId
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          addBank(this.noPwdForm).then(response => {
            if (response.code === '0000') {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        } else {
          return false
        }
      })
    },
    handleBack() {
      this.$router.go(-1)
    },
    resetForm() {
      this.bankForm = {
        platformId: '',
        merchantId: '',
        bankName: '',
        bankAccountName: '',
        bankNo: ''
      }
      this.noPwdForm = {
        platformId: '',
        merchantId: '',
        bankName: '',
        bankAccountName: '',
        bankNo: '',
        password: '',
        password1: ''
      }
    }
  }
}
</script>

<style>

</style>
